<template>
  <div class="card" :class="[store.getters.getLayout.layoutMode]">
    <div class="cpy" v-if="store.getters.getLayout.menuShowTopBar">
      <div v-if="!isCollapse" class="card-logo center-text flex-max f20 c-blue">眼镜蛇 <span class="f15 m-l-10">v1.0</span></div>
      <div class="fold center-text hand-cursor" @click="isCollapse=!isCollapse">
        <span class="iconfont iaiai-fold f20 c-blue" v-if="!isCollapse" />
        <span class="iconfont iaiai-expand f20 c-blue" v-if="isCollapse" />
      </div>
    </div>
    <el-row style="width: 260px" v-if="!store.getters.getLayout.menuShowTopBar" />

    <div class="menu-content flex-max">
      <el-menu :router="true"
               :default-active="$route.path"
               :collapse="isCollapse">
<!--        <el-menu-item index="/home">-->
<!--          <span class="iconfont iaiai-home f20 m-r-10"></span>首页-->
<!--        </el-menu-item>-->
<!--        <el-sub-menu index="1">-->
<!--          <template #title>-->
<!--            <span class="iconfont iaiai-meeting-fill f20 m-r-10"></span>系统管理-->
<!--          </template>-->
<!--          <el-menu-item index="/system/user/index">-->
<!--            <span class="iconfont iaiai-ios-people f20 m-r-10"></span>用户管理-->
<!--          </el-menu-item>-->
<!--          <el-menu-item index="/system/dept/index">-->
<!--            <span class="iconfont iaiai-people-dept f17 m-r-10"></span>部门管理-->
<!--          </el-menu-item>-->
<!--          <el-menu-item index="/system/post/index">-->
<!--            <span class="iconfont iaiai-contacts f15 m-r-10"></span>岗位管理-->
<!--          </el-menu-item>-->
<!--          <el-sub-menu index="1-4">-->
<!--            <template #title><span>-->
<!--              <span class="iconfont iaiai-boss-fill f15 m-r-10"></span>权限管理-->
<!--            </span></template>-->
<!--            <el-menu-item index="/system/role/index">-->
<!--              <span class="iconfont iaiai-custom f15 m-r-10"></span>角色管理-->
<!--            </el-menu-item>-->
<!--            <el-menu-item index="/system/menu/index">-->
<!--              <span class="iconfont iaiai-menu f15 m-r-10"></span>菜单管理-->
<!--            </el-menu-item>-->
<!--          </el-sub-menu>-->
<!--          <el-menu-item index="1-1">-->
<!--            <span class="iconfont iaiai-repairfill f15 m-r-10"></span>配置参数-->
<!--          </el-menu-item>-->
<!--          <el-sub-menu index="1-6">-->
<!--            <template #title><span>-->
<!--              <span class="iconfont iaiai-desktopmac f15 m-r-10"></span>消息/信息-->
<!--            </span></template>-->
<!--            <el-menu-item index="1-6-1">-->
<!--              <span class="iconfont iaiai-md-log f15 m-r-10"></span>日志-->
<!--            </el-menu-item>-->
<!--          </el-sub-menu>-->
<!--          <el-sub-menu index="1-5">-->
<!--            <template #title><span>-->
<!--              <span class="iconfont iaiai-desktopmac f15 m-r-10"></span>服务器-->
<!--            </span></template>-->
<!--            <el-menu-item index="1-5-1">-->
<!--              <span class="iconfont iaiai-desktopmac f15 m-r-10"></span>基本信息-->
<!--            </el-menu-item>-->
<!--            <el-menu-item index="1-5-2">-->
<!--              <span class="iconfont iaiai-cpu f15 m-r-10"></span>CPU-->
<!--            </el-menu-item>-->
<!--          </el-sub-menu>-->
<!--        </el-sub-menu>-->

        <menuTree :menus="navMenus"/>
      </el-menu>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {inject, onMounted, ref} from "vue"
import menuTree from "@/views/main/menu_tree.vue"
import {useStore} from 'vuex'

const store = useStore()    //获取store对象
const $api = inject('$api')
const $post = inject('$post')

const navMenus = ref([])
const isCollapse = ref(false)

onMounted(()=>{
  $post($api.navMenus).then((res)=>{
    navMenus.value = res.data.result.menus
  })
})
</script>

<style lang="scss" scoped>
.card{
  //width: 260px;
  height: 100%;
  background-color: #ffffff;

  box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
  padding: 0;

  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-sizing: border-box;

  .card-logo{
    width: 196px;
  }

  .cpy{
    height: 50px;
    background-color: #fcfcfc;
    display: flex;

    flex-direction: row;

    .fold{
      width: 64px;
      height: 100%;
    }
  }

  .menu-content{
    overflow-y: auto;

    .el-menu{border-right: 0px}
  }
}

.card.Default{
  border-radius: 4px;
}
.card.Classic,.card.Streamline,.card.Double{
  border-radius: 0px;
}
</style>
